.pageContainer {
  --panel-height: calc(100vh - 200px);  // 整个panel高度
  --panel-content-height: calc(100vh - 270px);  // panel内容容器，减去head(34)和tab(36)高度

  display: block !important;
  position: relative;

  :global {

    .panel-collpase {
      animation: collapse001 0.6s;
      animation-fill-mode: forwards
    }

    .panel-normal {
      animation: normal001 0.6s;
      animation-fill-mode: forwards
    }

    .panel {
      // transition: width 1s, max-height 0.5s;
      width: 300px;
      // height: calc(100vh - 300px);
      height: var(--panel-height);
      position: absolute;
      overflow: hidden;
      background-color: #FFFFFFE0;
      z-index: 1000;
      top: 10px;
      left: 10px;

      // margin-top: 10px;
      // margin-left: 10px;
      .header {
        background-color: #0a8cffd0;
        width: 100%;
        height: 36px;
        color: $color-white;

        span {
          text-wrap: nowrap;
        }

        .btn-panel-collpase {
          position: absolute;
          right: 10px;
          top: 8px;
        }
      }

      .head-tab {
        background-color: #2398ffd0;
        height: 34px;
        color: #fff;

        button {
          color: #fff;
        }
      }

      .triangle {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #FFFFFF;
        position: absolute;
        top: 64px;

        transition: left 0.2s;
      }

      .content {
        padding: 10px;
        height: var(--panel-content-height);
        overflow: hidden;
      }

    }

    .info-btn {
      cursor: pointer;
      position: absolute;
      left: 12px;
      top: 12px;
      z-index: 1001;
      height: 34px;
      width: 34px;
      opacity: 0.7;

      i {
        margin-left: -4px;
        margin-top: -2px;
      }
    }

    .btn-common {
      cursor: pointer;
      position: absolute;
      background-color: #FFFFFF;
      width: 26px;
      height: 26px;
      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.15);

      right: 15px;
      z-index: 1001;
    }

    .btn-traffic {
      @extend .btn-common;

      bottom: 80px;

      img {
        width: 21px;
        margin-left: 2px;
        margin-top: 3px;
      }

    }

    .btn-ruler {
      @extend .btn-common;

      color: grey;
      bottom: 106px;

      i {
        width: 21px;
        margin-left: 3px;
        margin-top: 3px;
      }

    }

  }
}
